<template>
	<div class="myOrder">
		<NewsHeader 
			:isInput="dataArr.isInput" 
			:iconArr="dataArr.iconArr" 
			:placeholder="dataArr.placeholder" 
			:aimUrl = 'dataArr.aimUrl'
			:rightUrl='dataArr.rightUrl'
		/>
		<div class="myOrderCont">
			<div class="orderDetail" v-for="(item,index) in myOrderArr" :key='index'>
				<div class="orderDetailLeft">
					<img :src="item.imgUrl" alt="">
				</div>
				<div class="orderDetailRight">
					<p>
						<span>{{ item.orderName }}</span>
						<span>{{ item.orderIntroduce }}</span>
					</p>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import NewsHeader from '../../components/shopheader'
	export default{
		name:'myorder',
		components:{
			NewsHeader,
		},
		data(){
			return{
					dataArr:{
						isInput:false,
						iconArr:[
							{
								iconLeft:"icon-zuojiantou",
								iconRight:""
							}
						],
						placeholder:"我的订单",
						aimUrl:'/layout/mine',
						rightUrl:''
					},
					myOrderArr:[
						{
							imgUrl:require('../../assets/images/mine/icon_fangzu@2x.png'),
							orderName:'房租',
							orderIntroduce:'查看 房租等订单'
						},
						{
							imgUrl:require('../../assets/images/mine/icon_shangcheng@2x.png'),
							orderName:'商城',
							orderIntroduce:'查看 家具、家电等订单'
						},
							{
							imgUrl:require('../../assets/images/mine/icon_shenghuofuwu@2x.png'),
							orderName:'生活服务',
							orderIntroduce:'查看 保洁、维修等订单'
						}
					]
			}
		}
	}
</script>
<style scoped lang="less">
.myOrder{
	width: 100%;
	min-height: 1334 / 100rem;
	padding-top: 88 / 100rem;
	background-color: #ededed;
	box-sizing: border-box;
	.myOrderCont{
		width: 100%;
		padding-left:20 / 100rem;
		padding-right: 20 / 100rem;
		padding-top: 20 / 100rem;
		box-sizing: border-box;
		.orderDetail{
			width: 100%;
			height: 160 / 100rem;
			background-color: #fff;
			margin-bottom: 20 / 100rem;
			border-radius: 8 / 100rem;
			box-shadow: 0 0 14 / 100rem 14 / 100rem rgba(255, 255, 255, 0.3);
			.orderDetailLeft{
				img{
					width: 80 / 100rem;
					height: 80 / 100rem;
					margin-top: 40 / 100rem;
					margin-bottom: 40 / 100rem;
					margin-left: 40 / 100rem;
					margin-right: 20 / 100rem;
				}
			}
			.orderDetailRight{
				p{
					span{
						display: block;
						color: rgba(0, 0, 0, 0.8);
					}
					span:nth-child(1){
						margin-top: 46 / 100rem;
						margin-bottom: 14 / 100rem;
						font-size: 30 / 100rem;
						font-weight: 600;
					}
					span:nth-child(2){
						margin-bottom: 46 / 100rem;
						font-size: 26 / 100rem;
						font-weight: 400;
					}
				}
			}
		}
		.orderDetail>div{
			float: left;
		}
	}
}		
</style>